export class ScreenHelper {
    private hasListener:boolean=false;
    private _clientWidth:number=0;
    private _clientHeight:number=0;
    private _clientHeightInRem:number=0;
    private _screenWidth:number=0;
    private _screenWidthInRem:number=0;
    private _clientLeftMargin:number=0;
    private _clientLeftMarginInRem:number=0;


    /**
     * 获取屏幕宽度
     */
    public get screenWidth() {
        if(!this._screenWidth) this.reCalc();
        return this._screenWidth;
    }
    public get clientWidth() {
        if(!this._clientWidth) this.reCalc();
        return this._clientWidth;
    }public get screenWidthInRem() {
        if(!this._screenWidthInRem) this.reCalc();
        return this._screenWidthInRem;
    }

    public get clientWidthInRem() {
        return 20;
    }
    public get clientLeftMargin(){
        // if(!this._clientLeftMargin) this.reCalc();
        return this._clientLeftMargin;
    }
    public get clientLeftMarginInRem(){
        // if(!this._clientLeftMarginInRem) this.reCalc();
        return this._clientLeftMarginInRem;
    }
    public get screenHeight() {
        if(!this._clientHeight) this.reCalc();
        return this._clientHeight;
    }  //屏幕高度
    public get screenHeightInRem() {
        if(!this._clientHeightInRem) this.reCalc();
        return this._clientHeightInRem
    }

    public setFont() {
        if(this.hasListener) return;
        let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        if (!document.addEventListener) return;
        window.addEventListener(resizeEvt, this.reCalc, false);
        document.addEventListener('DOMContentLoaded', this.reCalc, false);
        this.hasListener=true;
    }
    private reCalc(){
        let docEl = document.documentElement;
        this._screenWidth=docEl.clientWidth;
        this._screenWidthInRem=this._screenWidth>640?this._screenWidth/32:20;

        this._clientWidth=this._screenWidth>640?640:this._screenWidth;

        docEl.style.fontSize = this._clientWidth * 0.05 + 'px';

        this._clientLeftMargin=(this._screenWidth-this._clientWidth)/2;
        this._clientLeftMarginInRem=(this._screenWidthInRem-20)/2;

        this._clientHeight=docEl.clientHeight;
        this._clientHeightInRem=this._clientHeight/this._clientWidth*20;
    }
}
export const screenHelper=new ScreenHelper();